<script>
import { DATA_TYPE_DATE_PICKER, DATA_TYPE_SELECT } from './Constant'

export default {
  name: 'Index2',
  props: {
    dialogConfig: {
      type: Object,
      required: true
    },
    curItem: {
      type: Object,
      default: () => {}
    },
    showOk: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    resetForm() {
      const { formName } = this.dialogConfig || {}
      this.$refs[formName].resetFields()
    },
    validateForm(callback) {
      const { formName } = this.dialogConfig || {}
      this.$refs[formName].validate(callback)
    },
    show() {
      this.isShow = true
    },
    hide() {
      this.isShow = false
    },
    onClose() {
      this.resetForm()
      this.hide()
    },
    onSave() {
      const { formName } = this.dialogConfig || {}
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log('submit!!')
        } else {
          return false
        }
      })
    }
  },
  render(createElement, context) {
    const { formName, dialogProps, rules, items } = this.dialogConfig || {}
    console.log(dialogProps)
    // 表单项目
    let formItems = []
    formItems = items.map(filterItem => {
      let elItem = null
      switch (filterItem.type) {
        case DATA_TYPE_DATE_PICKER:
          elItem = <el-date-picker
            v-model={this.curItem[filterItem.prop]}
            type='date'
            placeholder={filterItem.placeholder}
            value-format={filterItem.format}
            format={filterItem.format}
          />
          break
        case DATA_TYPE_SELECT:
          elItem = (<el-select
            v-model={this.curItem[filterItem.prop]}
            placeholder={filterItem.placeholder}
            clearable={filterItem.clearable}
          >
            {
              filterItem.options && filterItem.options.map(optionItem =>
                <el-option
                  key={optionItem.value}
                  value={optionItem.value}
                  label={optionItem.label}
                />)
            }
          </el-select>)
          break
        default:
          elItem = <el-input v-model={this.curItem[filterItem.prop]} placeholder={filterItem.placeholder} />
          break
      }
      return (
        <el-col span={filterItem.colSpan || 24}>
          <el-form-item label={filterItem.label} prop={filterItem.prop}>
            { elItem }
          </el-form-item>
        </el-col>
      )
    })
    return (
      <el-dialog
        visible={this.isShow}
        close-on-click-modal={false}
        title={dialogProps.title}
        onClose={this.hide}
      >
        <el-form
          ref={formName}
          size='small'
          label-width='100px'
          props={{ model: this.curItem, rules: rules }}
        >
          <el-row>
            { formItems }
          </el-row>
        </el-form>
        <div slot='footer'>
          <el-button onClick={() => this.onClose()}>取 消</el-button>
          <el-button type='primary' onClick={() => this.onSave()}>确 定</el-button>
        </div>
      </el-dialog>
    )
  }
}
</script>

<style lang="scss" scoped>

</style>
